<template>
    <div>
        <div class="title mb-8">
            <div class="text-6">订单管理</div>
        </div>
        <div class="query">
            <el-form :inline="true" :model="queryForm" class="demo-form-inline">
                <el-form-item label="订单号">
                    <el-input
                        v-model="queryForm.num"
                        placeholder="请输入订单号"
                    ></el-input>
                </el-form-item>
                <el-form-item label="类型">
                    <el-select v-model="queryForm.type" placeholder="请选择">
                        <el-option label="全部" value="" />
                        <el-option label="停车费" :value="0" />
                        <el-option label="购买套餐" :value="1" />
                        <el-option label="其他" :value="2" />
                    </el-select>
                </el-form-item>
                <el-form-item label="支付状态">
                    <el-select v-model="queryForm.status" placeholder="请选择">
                        <el-option label="全部" value="" />
                        <el-option label="未支付" :value="0" />
                        <el-option label="已支付" :value="1" />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="search" @click="getData"
                        >查询</el-button
                    >
                </el-form-item>
            </el-form>
        </div>
        <div class="actions mb-4">
            <el-button
                icon="plus"
                type="warning"
                @click="addDialogVisible = true"
                >添加</el-button
            >
        </div>
        <div class="data mb-4">
            <el-table :data="tableData" bpayRecord>
                <!-- <el-table-column prop="id" label="id" /> -->
                <el-table-column prop="num" label="订单号" />
                <el-table-column prop="amount" label="金额" />
                <el-table-column prop="reduce" label="优惠" />
                <el-table-column prop="realAmount" label="应付" />
                <el-table-column prop="realPay" label="实付" />
                <el-table-column prop="status" label="状态">
                    <template #default="scope">
                        <el-tag v-if="scope.row.status === 0" type="danger"
                            >未支付</el-tag
                        >
                        <el-tag
                            v-else-if="scope.row.status === 1"
                            type="success"
                            >已支付</el-tag
                        >
                    </template>
                </el-table-column>
                <el-table-column prop="type" label="类型">
                    <template #default="scope">
                        <el-tag v-if="scope.row.type === 0" type="info"
                            >停车费</el-tag
                        >
                        <el-tag v-else-if="scope.row.type === 1" type="info"
                            >购买套餐</el-tag
                        >
                        <el-tag v-else-if="scope.row.type === 2" type="info"
                            >其他</el-tag
                        >
                    </template>
                </el-table-column>
                <el-table-column prop="method" label="支付方式" />
                <el-table-column prop="time" label="支付时间">
                    <template #default="scope">
                        {{ dateFromat(scope.row.time) }}
                    </template>
                </el-table-column>
                <el-table-column prop="comment" label="备注" />

                <el-table-column label="操作" width="200">
                    <template #default="scope">
                        <el-space>
                            <el-button
                                type="primary"
                                icon="edit"
                                @click="handleEdit(scope.row)"
                                >编辑</el-button
                            >
                            <el-button
                                type="danger"
                                icon="delete"
                                @click="handleDelete(scope.row.id)"
                                >删除</el-button
                            >
                        </el-space>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="pagination">
            <el-pagination
                background
                layout="total, prev, pager, next"
                :total="total"
                :page-size="10"
                @current-change="getData"
                v-model:current-page="queryForm.page"
            />
        </div>
        <div class="add-dialog">
            <el-dialog title="添加订单" v-model="addDialogVisible" width="30%">
                <el-form :model="addForm" label-position="top" ref="addFormRef">
                    <el-form-item label="原价" required prop="amount">
                        <el-input
                            v-model="addForm.amount"
                            placeholder="请输入原价"
                        />
                    </el-form-item>
                    <el-form-item label="优惠" required prop="reduce">
                        <el-input
                            v-model="addForm.reduce"
                            placeholder="请输入优惠"
                        />
                    </el-form-item>
                    <el-form-item label="应付">
                        <div>{{ addForm.amount - addForm.reduce }}</div>
                    </el-form-item>
                    <el-form-item label="实付" required prop="realPay">
                        <el-input
                            v-model="addForm.realPay"
                            placeholder="请输入实付"
                        />
                    </el-form-item>
                    <el-form-item label="支付状态" required prop="status">
                        <el-select
                            v-model="addForm.status"
                            placeholder="请选择支付状态"
                        >
                            <el-option label="未支付" :value="0" />
                            <el-option label="已支付" :value="1" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="订单类型" required prop="type">
                        <el-select
                            v-model="addForm.type"
                            placeholder="请选择订单类型"
                        >
                            <el-option label="停车费" :value="0" />
                            <el-option label="购买套餐" :value="1" />
                            <el-option label="其他" :value="2" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="付款方式" prop="method">
                        <el-select
                            v-model="addForm.method"
                            placeholder="请选择付款方式"
                        >
                            <el-option
                                v-for="item in payMethodOptions"
                                :key="item.id"
                                :label="item.name"
                                :value="item.name"
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="付款时间" prop="time">
                        <el-date-picker
                            v-model="addForm.time"
                            type="datetime"
                            value-format="YYYY-MM-DD HH:mm:ss"
                            placeholder="选择日期时间"
                        />
                    </el-form-item>
                    <el-form-item label="备注" prop="comment">
                        <el-input
                            v-model="addForm.comment"
                            placeholder="请输入备注"
                        />
                    </el-form-item>

                    <el-form-item>
                        <el-button
                            type="primary"
                            icon="Check"
                            @click="addSubmit"
                            >提交</el-button
                        >
                    </el-form-item>
                </el-form>
            </el-dialog>
        </div>
        <div class="edit-dialog">
            <el-dialog
                title="修改车主信息"
                v-model="editDialogVisible"
                width="30%"
            >
                <el-form
                    :model="editForm"
                    label-position="top"
                    ref="editFormRef"
                >
                    <el-form-item label="订单编号" prop="num">
                        <div>{{ editForm.num }}</div>
                    </el-form-item>
                    <el-form-item label="原价" required prop="amount">
                        <el-input
                            v-model="editForm.amount"
                            placeholder="请输入原价"
                        />
                    </el-form-item>
                    <el-form-item label="优惠" required prop="reduce">
                        <el-input
                            v-model="editForm.reduce"
                            placeholder="请输入优惠"
                        />
                    </el-form-item>
                    <el-form-item label="应付">
                        <div>{{ editForm.amount - editForm.reduce }}</div>
                    </el-form-item>
                    <el-form-item label="实付" required prop="realPay">
                        <el-input
                            v-model="editForm.realPay"
                            placeholder="请输入实付"
                        />
                    </el-form-item>
                    <el-form-item label="支付状态" required prop="status">
                        <el-select
                            v-model="editForm.status"
                            placeholder="请选择支付状态"
                        >
                            <el-option label="未支付" :value="0" />
                            <el-option label="已支付" :value="1" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="订单类型" required prop="status">
                        <el-select
                            v-model="editForm.status"
                            placeholder="请选择订单类型"
                        >
                            <el-option label="停车费" :value="0" />
                            <el-option label="购买套餐" :value="1" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="付款方式" prop="method">
                        <el-select
                            v-model="editForm.method"
                            placeholder="请选择付款方式"
                        >
                            <el-option
                                v-for="item in payMethodOptions"
                                :key="item.id"
                                :label="item.name"
                                :value="item.name"
                            />
                        </el-select>
                    </el-form-item>

                    <el-form-item label="付款时间" prop="time">
                        <el-date-picker
                            v-model="editForm.time"
                            type="datetime"
                            value-format="YYYY-MM-DD HH:mm:ss"
                            placeholder="选择日期时间"
                        />
                    </el-form-item>
                    <el-form-item label="备注" prop="comment">
                        <el-input
                            v-model="editForm.comment"
                            placeholder="请输入备注"
                        />
                    </el-form-item>
                    <el-form-item>
                        <el-button
                            type="primary"
                            icon="Check"
                            @click="editSubmit"
                            >提交</el-button
                        >
                    </el-form-item>
                </el-form>
            </el-dialog>
        </div>
    </div>
</template>

<script setup lang="ts">
import dayjs from 'dayjs'
import { ElMessage, ElMessageBox } from 'element-plus'
import { cloneDeep, keys, pick, pickBy } from 'lodash-es'
import { ref } from 'vue'
import {
    createPayRecordApi,
    deletePayRecordApi,
    getPayRecordPageApi,
    updatePayRecordApi,
} from '@/apis/payRecord'
import { getPayMethodOptionListApi } from '@/apis/payMethod'
import { dateFromat } from '@/utils/dateFormat'

const queryForm = ref({
    num: '',
    type: '',
    status: '',
    method: '',
    page: 1,
})

// 添加表单
const addDialogVisible = ref(false)
const addFormRef = ref<any>(null)
// 添加表单数据
const defaultAddVal = {
    // 订单号
    num: '', // 自动生成
    // 原价
    amount: 0,
    // 优惠
    reduce: 0,
    // 应付
    realAmount: 0, // 自动生成
    // 实付
    realPay: 0, // 付款时记录
    status: 0, // 状态，0 未支付，1 已支付
    type: 0, // 类型，0 停车费，1 购买套餐
    comment: undefined,
    method: undefined, // 付款方式，0 微信，1 支付宝，来则付款方式表
    time: undefined, // 付款时间，自动生成
}
const addForm = ref(cloneDeep(defaultAddVal))
// 添加提交
const addSubmit = () => {
    addFormRef.value!.validate(async (valid) => {
        if (valid) {
            addForm.value.realAmount =
                addForm.value.amount - addForm.value.reduce
            addForm.value.num = dayjs().format('YYYYMMDDHHmmss')
            const res = await createPayRecordApi(addForm.value)
            if (res) {
                addDialogVisible.value = false
                ElMessage.success('成功')
                addForm.value = cloneDeep(defaultAddVal)
                getData()
            }
        } else {
            return false
        }
    })
}

// 添加表单
const editDialogVisible = ref(false)
const editFormRef = ref<any>(null)
// 添加表单数据
const defaultEditVal = {
    id: 0,
    num: '123',
    // 原价
    amount: 0,
    // 优惠
    reduce: 0,
    // 应付
    realAmount: 0,
    // 实付
    realPay: 0,
    status: 0,
    type: 0,
    comment: undefined,
    method: undefined,
    time: undefined,
}
const editForm = ref(cloneDeep(defaultEditVal))
// 添加提交
const editSubmit = () => {
    editFormRef.value!.validate(async (valid) => {
        if (valid) {
            const picked = pick(editForm.value, keys(defaultEditVal))
            const id = picked.id
            delete picked.id
            const res = await updatePayRecordApi(id, picked)
            if (res) {
                editDialogVisible.value = false
                ElMessage.success('成功')
                editForm.value = cloneDeep(defaultEditVal)
                getData()
            }
        } else {
            return false
        }
    })
}

// 点击编辑
const handleEdit = (row) => {
    editDialogVisible.value = true
    editForm.value = cloneDeep(row)
    if (editForm.value.time) {
        editForm.value.time = dayjs(editForm.value.time).format(
            'YYYY-MM-DD HH:mm:ss'
        )
    }
}

// 删除
const handleDelete = (id) => {
    ElMessageBox.confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    })
        .then(async () => {
            await deletePayRecordApi(id)
            ElMessage.success('删除成功!')
            getData()
        })
        .catch(() => {
            ElMessage.info('已取消删除')
        })
}

// 计费模式下拉选项
const payMethodOptions = ref<any>([])

// 表格数据
const tableData = ref<any>([])
const total = ref(0)

// 获取表格数据
const getData = async () => {
    const queryData = cloneDeep(queryForm.value)
    const query = pickBy(queryData, (item) => item !== '' && item !== null)
    const res = (await getPayRecordPageApi(query)) as any
    tableData.value = res.rows
    total.value = res.total
}

// 获取计费模式下拉选项
const getPayMethodOptions = async () => {
    const res = (await getPayMethodOptionListApi()) as any
    payMethodOptions.value = res
}

const getPayMethodOptionById = (id) => {
    if (payMethodOptions.value.length === 0 || id == null || id == undefined) {
        return {}
    }
    return payMethodOptions.value.find((item) => item.id === id)
}

getData()
getPayMethodOptions()
</script>

<style scoped></style>
